import React from 'react';
import { observer } from 'mobx-react';
import { WeaInput, WeaDialog, WeaLocaleProvider } from 'ecCom';
import { SelectNew, Button } from 'antd';
import classNames from 'classnames';
import $ from 'jquery';
import ReactDOM from 'react-dom';
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class ExcelCellSelect extends React.Component {
    // dom: HTMLDivElement;
    constructor(props) {
        super(props);
        this.state = {
            changing: false,
            type: 'field'
        }
        // this.dom = document.createElement('div');
        // this.dom.className = "edc-report-portal"
    }

    render() {

        console.log(this.props);
        const {
            tableCellProps: { text, record, index, onEdit }
        } = this.props;
        const { showname } = record;
        const { options, value, tableCellProps } = this.props;
        const { type, changing } = this.state;
        const showSelect = (type === 'field' || !value) && !changing;
        return (
            <div className={classNames("edc-report-excel-cell-select", { changing })}>
                {<WeaInput viewAttr={3} value={showname} readonly={true} />}
                {<Button onClick={this.onSelectCell}>{changing ?
                    <i title={getLabel(826, "确定")} className="icon-coms-complete"></i>
                    : <i className="icon-coms-release"> </i>}</Button>}
            </div>
        )
    }

    componentDidUpdate() {
        console.log("this.state.changing", this.state.changing);
        if (this.state.changing) {
            $(ReactDOM.findDOMNode(this)).closest('td').addClass('show-td');
        } else {
            $(ReactDOM.findDOMNode(this)).closest('td').removeClass('show-td');
        }
    }

    componentWillReceiveProps(nextProps) {
        if (!nextProps.value) {
            this.setState({ type: 'field' })
            console.log(this.state);
        }
    }

    onSelectCell = () => {
        // const {
        //     tableCellProps: { text, record, index, onEdit }
        // } = this.props;
        const { tableCellProps } = this.props;
        // console.log(text, record, index);
        // const uuid = utils.UUID();
        // console.log("utils.UUID()", uuid);
        this.setState({
            type: 'cell',
            changing: !this.state.changing
        })
        if (this.state.changing) {
            if (this.props.onChangeSize) {
                this.props.onChangeSize('normal', tableCellProps);
            }
        } else {
            if (this.props.onChangeSize) {
                this.props.onChangeSize('small', tableCellProps);
            }
        }
    }
}